<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .form{
      width: 300px;
      height: 300px;
      /*background-color: #00ccFF;*/
      margin: 0 auto;
      padding: 50px;
      text-align: right;
    }
    .w-200{
      width: 200px;
      margin-bottom: 10px;
    }

    .w-100{
      width: 100px;
      margin-bottom: 10px;
    }

    .h-30{
      height: 30px;
    }

    .button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 10px;
      width: 230px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin-top: 10px;
    }
    .margin-bottom-10{
      margin-bottom:10px;
    }

  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>

</head>
<body>

<div class="form">
  <div>
    <div>超时订单：</div>
    <div >
      <ul id="cancelOrders">
      </ul>
    </div>
    <button class="button" id="return">返回</button>

  </div>
</div>

</body>
<script>
  $(document).ready(function(){
    $.ajax(
        {
          url:"/api/cancel-orders",
          type: "GET",
          success:function(result){
            result.forEach(order => {
              $('#cancelOrders').append("<li>"+order['orderNumber']+"</li></br>")
            })
          },
          error:function(err){
          }
        });

    $("#return").click(function(){
      window.location.href = "index.html";
    });
  });
</script>
</html>
